<!DOCTYPE html >
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" th:href="@{../bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{../css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{../css/main.css}">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        .tree-closed {
            height: 40px;
        }

        .tree-expanded {
            height: auto;
        }
    </style>


</head>
<body>
<div th:replace="../templates/nav"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="../templates/menu"></div>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">

                    <form class="form-inline" role="form" style="float:left;" id="selectForm2">
                        <div class="form-group has-feedback">
                            班级：<select id="option" class="form-control" name="cid"></select>

                            就业时间：<input type="date" id="begin1" name="begin" >-<input type="date" id="end1" name="end" >
                        </div>
                        <button type="button" class="btn btn-warning" id="btnSearch" onclick="selectlineAll()"><i class="glyphicon glyphicon-search"></i> 搜索</button>
                    </form>

                    <br>
                    <hr style="clear:both;">
                </div>
            </div>

            <!-- 折现-->
            <br><br>
            <div id="main" style="width: 500px;height:350px;float:left;margin-left: 2%"></div>
            <!--饼形图-->
            <div id="main2" style="width: 500px;height:400px;float:left;margin-left: 5%"></div>

        </div>
    </div>
</div>
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{|/jquery/jquery.md5.js|}"></script>
<script th:src="@{../bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{../script/docs.min.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) { // 3 li
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });
</script>
</body>

</html>
<script th:src="@{../jquery/jquery-2.1.1.min.js}"></script>
<!-- 引入 echarts.js -->

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script>
    $(function () {
        //班级填充
        url1 = "/clazz/clazzbiyeDo";
        $.get(url1,"",function (data){
            if(data.result){
                var htmldata1 = "<option  value='' >蜗牛校区</option>";
                $.each(data.clazzList,function(index,clazz){
                    htmldata1 = htmldata1 + "<option value="+clazz.cid+" >"+clazz.cname+"</option>";
                })
                $("#option").html(htmldata1);
                // 所有班级的折现图
                selectlineAll();
            }
        })

        //毕业时间填充
        url="/clazz/beyetimeDo"
        $.get(url,"",function (data){
            if(data.result){
                $("#begin1").val(data.clazz.begin);
                $("#end1").val(data.clazz.end);
                // 所有班级的折现图
                selectlineAll();
            }
        })


    })

    function selectlineAll(){
        url="/permission/salaryDo"
        // var cid = $("#option").val();
        // if(parm == null){parm = -1;}
        // var begin = $("#begin1").val;
        // var end = $("#end1").val;
        // "cid="+cid+"&begin="+begin+"&end="+
        var begin = $("#begin1").val()
        var end = $("#end1").val()
        if((begin != null || begin != "") && (end != null || end != "") ){

            const begin2 = new Date(begin)
            const end2= new Date(end)
            if(begin2.getTime() > end2.getTime()){
                layer.msg("开始日期大于结束日期咯", {time: 1000, icon: 4, shift: 6}, function () {
                });
                return
            }
        }

        var parm = $("#selectForm2").serialize();

        $.get(url,parm,function (data){
            if(data.result){
                if(data.jobList.length == 0){
                    layer.msg("查询数据为空，请重新输入查询时间", {time: 3000, icon: 5, shift: 6}, function () {
                    });
                    return
                }
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                option = {
                    backgroundColor: '#0f375f',
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['各地区平均工资'],
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    xAxis: {
                        // data: category,
                        data:  [],
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        }
                    },
                    yAxis: {
                        splitLine: {show: false},
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        }
                    },
                    series: [{
                        // name: 'line',
                        type: 'line',
                        smooth: true,
                        // showAllSymbol: true,
                        symbol: 'emptyCircle',
                        symbolSize: 15,
                        // data: lineData
                        data:  []
                    }, {
                        // name: 'bar',
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            barBorderRadius: 5,
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#14c8d4'},
                                    {offset: 1, color: '#43eec6'}
                                ]
                            )
                        },
                        // data: barData
                        data:  []
                    }, {
                        name: '平均工资',
                        type: 'pictorialBar',
                        symbol: 'rect',
                        itemStyle: {
                            color: '#0f375f'
                        },
                        // symbolRepeat: true,
                        symbolSize: [12, 4],
                        symbolMargin: 1,
                        z: -10,
                        // data: lineData
                        data:  []
                    }]
                };
                $.each(data.jobList,function(index,job){
                    option.xAxis.data.push(job.loc);
                    option.series[0].data.push(job.avsalary);
                    option.series[1].data.push(job.avsalary);
                    option.series[2].data.push(job.avsalary);
                })
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                // 所有班级的饼状图
                selectpalace(data);
            }
        })
    }
    function selectpalace(data){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));
        option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: -15,
                data: []
            },
            series: [
                // {
                //     name: '访问来源',
                //     type: 'pie',
                //     selectedMode: 'single',
                //     radius: [0, '30%'],
                //
                //     label: {
                //         position: 'inner'
                //     },
                //     labelLine: {
                //         show: false
                //     },
                // data: [
                //     {value: 335, name: '直达', selected: true},
                //     {value: 679, name: '营销广告'},
                //     {value: 1548, name: '搜索引擎'}
                // ]
                // },
                {
                    name: '就业区域',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    label: {
                        formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        // shadowBlur:3,
                        // shadowOffsetX: 2,
                        // shadowOffsetY: 2,
                        // shadowColor: '#999',
                        // padding: [0, 7],
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            // abg: {
                            //     backgroundColor: '#333',
                            //     width: '100%',
                            //     align: 'right',
                            //     height: 22,
                            //     borderRadius: [4, 4, 0, 0]
                            // },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 16,
                                lineHeight: 33
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2
                            }
                        }
                    },
                    data: []
                }
            ]
        };
        $.each(data.jobList,function(index,job){
            option.legend.data.push(job.loc);
            option.series[0].data.push({value: job.count,name: job.loc});
        })
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>